HTML <section> tag
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. It’s used to split a page into sections like Introduction, Contact Information, Details, etc., and each of these sections can be in a different <section> tag. The <section> tag is introduced to wrap up things in a particular section. The <section> tag divides the content into sections and subsections.
Note: By default <section> element is of block-level.
Example: This example shows the use case of <section> tag on our web page.
<!DOCTYPE html>
<html>
<head>
<title>Section Tag</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: #dadada;
margin: auto;
}
div>section {
height: calc(100%/3);
width: 100%;
font-size: 2rem;
font-weight: 500;
}
div>section:nth-of-type(2n) {
background-color: green;
color: white;
}
.sub {
font-size: 1.2rem;
font-weight: 400;
}
</style>
</head>
<body>
<div class="container">
<section> Section 1 - Education
<section class="sub">Subsection 1 - About College</section>
<section class="sub">Subsection 2 - About School</section>
</section>
<section>Section 2 - Hobbies</section>
<section>Section 3 - Contact Info</section>
</div>
</body>
</html>
Output:
Differentiate between , & tags in HTML
HTML is a language full of diverse elements, and three such elements are the <article>, <p>, and <section> tags. These semantic tags, while similar, each have unique uses and meanings within an HTML document.
The article tag is used for the independent content, p tag for paragraph and section for different section of the document.
Tags in HTML are keywords where every specific single tag has some unique meaning.